<template>
    <div class="goods-list">
       <!-- <router-link class="goods-item" v-for="item in goodslist" :key="item.id" :to="'/home/goodsinfo/' + item.id">
        <img :src="item.src" alt="Beautiful Eyes"  tag="div">
        <h1 class="tittle">{{item.tittle}}</h1>
        <div class="info">
            <p class="price">
                <span class="now">￥{{item.sell_price}}</span>
                <span class="old">￥{{item.market_price}}</span>
            </p>
            <p class="sell">
                <span>热卖中</span>
                <span>剩余{{item.stock_quantity}}件</span>
            </p>
        </div>
        </router-link> -->

        <!-- 编程式导航 ：window.location.href-->
        <div class="goods-item" v-for="item in goodslist" :key="item.id"  @click="goDetail(item.id)">
            <img :src="item.src" alt="Beautiful Eyes">
            <h1 class="tittle">{{item.tittle}}</h1>
            <div class="info">
                <p class="price">
                    <span class="now">￥{{item.sell_price}}</span>
                    <span class="old">￥{{item.market_price}}</span>
                </p>
                <p class="sell">
                    <span>热卖中</span>
                    <span>剩余{{item.stock_quantity}}件</span>
                </p>
            </div>
        </div>

        <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
    export default {
       // name: "goodslist"
        data(){
            return{
                pageindex:51,
                goodslist:[]
            }

            },
        created(){
            this.getGoodsList()
        },
        methods:{
                getGoodsList(){
                    this.$http.get('Java/photoinfo'+this.pageindex + '.json').then(result =>{
                        if (result.body.status === 0) {
                            this.goodslist = this.goodslist.concat(result.body.message);
                        }
                    })
                },
                getMore(){
                    this.pageindex ++
                    this.getGoodsList()
                },
            goDetail(id){
                    //第一种方式
               // this.$router.push('/home/goodsinfo/' + id);
                //第二种方式
               // this.$router.push({path:"/home/goodsinfo/" + id});
                //第三种方式
                this.$router.push({name:"goodsinfo",params:{id}})
            }
            }
    }
</script>

<style scoped lang="scss">
.goods-list{
    display: flex;
    flex-wrap: wrap;
    padding: 8px;
    justify-content: space-between;
    margin-bottom: 200px;

   .goods-item{
       width: 49%;
       border: 1px solid #ccc;
       box-shadow: 0 0 8px #ccc;
       justify-content: space-around;
       margin: 3px 0;
       padding: 2px;
       display: flex;
       flex-direction: column;//key part of display
       justify-content: space-between;
       min-height: 450px;
       img{
           width: 100%;
       }
       .tittle{
           font-size: 14px;
       }
       .info{
           background-color: #eee;
           p{
               margin: 0;
               padding: 5px;
           }
           .price{
             .now{
                color: red;
                 font-weight: bold;
                 font-size: 16px;
             }
               .old{
                    text-decoration: line-through;
                   font-size: 12px;
                   margin-left: 10px;

               }
           }
           .sell{
            display: flex;
               justify-content: space-between;
               font-size: 12px;

           }
       }
   }
}
</style>